<template>
	<view class="mine_xx fboxCol page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom :isSpace="false" :isCircle="true" :isBlur="false" linkId="usr19epldrmtd66i" :linkData="linkData"></HeadCustom>
		<view class="backImg" id="mineXxRef" :style="{ 'background-image': 'url(' + detail.backImg + ')' }">
			
			<!-- #ifndef MP-TOUTIAO -->
			<view class="spaceBar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="spaceHead"></view>
			<!-- #endif -->
			
			<view class="fboxRow user-info">
				<image :src="detail.avatar" class="ming_tx" mode="aspectFill"></image>
				<view class="grxx">
					<view class="name_box"><text class="name_text font32">{{ detail.realName }}</text></view>
					<view class="fboxRow Ycenter info lh40" v-if="detail.gender">{{ detail.gender == '1' ? '男' : '女' }} <view v-if="detail.gender && detail.areaCityName" style="margin: 0 10rpx; width: 1rpx;height: 20rpx;background-color: #BABABF;"></view>{{ detail.areaCityName }}</view>
					<view class="font-ell2 mt12 sign-text">{{ detail.memberSign }}</view>
				</view>
			</view>
			<view class="otherCard fboxRow Ycenter" v-if="ShowBolObj.isShowCard">
				<view class="fboxRow Ycenter Xcenter btn-action flex1" @click="$pageTo('/CardDetail?id=' + detail.memberId)">
					<text class="bw-Vector2 bwfont font24"></text>
					看名片
				</view>
				<view class="fboxRow Ycenter Xcenter btn-action flex1" @tap="giveCard">
					<text v-if="!detail.isFriend" class="bw-jiaohuan bwfont font24"></text>
					{{ detail.isFriend ? '发消息' : '交换名片' }}
				</view>
				<view class="fboxRow Ycenter Xcenter btn-action flex1" @tap="attention(detail.isAttention)">
					<text class="bwfont font28" :class="detail.isAttention ? 'bw-yiguanzhu' : 'bw-weiguanzhu'"></text>
					{{ !detail.isAttention ? '关注' : '已关注' }}
				</view>
			</view>
			<view class="space"></view>
		</view>
		<view class="tabs-nav fboxRow Ycenter">
			<!-- <view class="tabs-item fboxRow Ycenter font32" v-for="(item, index) in navList" :class="{active: navIndex == index}" :key="index" @tap="navTap(item, index)">{{item.title}}</view> -->
			<TabsCustom :list="navList" :active.sync="navIndex" :lineWidth="20" keyName="title" @change="navTap"></TabsCustom>
		</view>
		<view style="margin-top: 20rpx;" v-if="navIndex == 0">
			<view class="ddDtail" v-for="(item, index) in myddList" :key="index">
				<DynamicItem class="ddDtailRef" @updateAttention="getInit" :innerData="item" @login="login">
				</DynamicItem>
			</view>
			<u-loadmore fontSize="24rpx" :status="page.loading" />
		</view>
		<view style="margin-top: 20rpx;" v-else>
			<view class="albumList fboxWrap">
				<view class="album-item" v-for="(item, index) in albumList" :key="index">
					<image v-if="item.albumType == 1" class="pic" :class="item.isNeedPoint ? 'pic-blur' : ''"
						@tap="preview(index)" :src="item.albumUrl" mode="aspectFill"></image>
					<image v-if="item.albumType == 2" class="pic" :class="item.isNeedPoint ? 'pic-blur' : ''"
						@tap="previewVideo(item, index)" :src="item.videoCover" mode="aspectFill"></image>
					<view class="video-time  font28 fboxRow Ycenter" v-if="item.albumType == 2"><text class="bwfont bw-shipin2 font22" style="margin-right: 10rpx;"></text>{{item.playDuration || ''}}</view>
					<view class="action fboxRow Ycenter Xcenter" v-if="!item.isNeedPoint && memberId == userInfo.memberId"
						@click="actionShow(item, index)"><text class="bwfont bw-shezhi font24"></text></view>
					<view class="layer" v-if="item.isNeedPoint" @tap="viewByPoint(item, index)">
						<text class="bwfont bw-suo1 font32"></text>
					</view>
					<view class="modal-action" v-if="item.show">
						<!-- #ifdef MP -->
						<view class="action-item fboxRow Ycenter Xcenter" @tap="actionTap(item, index, 'share')">分享
						</view>
						<!-- #endif -->
						<view class="action-item fboxRow Ycenter Xcenter" @tap="actionTap(item, index, 'download')">下载
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="albumPage.loading != 'nomore'" fontSize="24rpx" :status="albumPage.loading" />
		</view>

		<not-login ref="notLogin" />
		<u-overlay :show="isVideo" @click="isVideo = false">
			<view class="video-box" @tap.stop>
				<view class="close" @click="isVideo = false"><u-icon size="42rpx" name="close" color="#fff"></u-icon>
				</view>
				<video class="video-inner" :src="albumUrl"></video>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		getUserHome,
		getOtherUser,
		getCircleDynamicAll,
		memberAlbumList,
		albumViewByPoint
	} from '@/api/mine.js';
	import {
		addAttention,
		manageAttention,
		cardRequest
	} from '@/api/h5.js';
	import DynamicItem from '@/components/circle/dynamic-item.vue';
	import TabsCustom from '@/components/head-custom/tabs-custom.vue';
	import {
		judgeIsLogin
	} from '@/static/js/common.js';
	export default {
		components: {
			DynamicItem,
			TabsCustom
		},
		props: {},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				detail: {},
				myddList: [],
				userInfo: {},
				memberId: '',
				ShowBolObj: {
					isShow: false,
					isLogin: false,
					isShowCard: false
				},
				mrbackImg: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/Rectangle.jpg',
				page: {
					current: 1,
					size: 20,
					total: 0,
					loading: 'loading'
				},
				linkData: {
					id: ''
				},
				// 导航
				navIndex: 0,
				navList: [{
						title: '点点',
						key: '0'
					},
					{
						title: '相册',
						key: '1'
					},
					{
						title: '视频',
						key: '2'
					}
				],
				// 相册和视频
				albumList: [],
				albumPage: {
					current: 1,
					size: 20,
					total: 0,
					loading: 'loading'
				},
				// 视频播放
				isVideo: false,
				albumUrl: '',
				statusBarHeight: getApp().globalData.statusBarHeight
			};
		},
		created() {
			this.statusBarHeight = getApp().globalData.statusBarHeight;
			if (!getApp().globalData.statusBarHeight) {
				const sys = uni.getSystemInfoSync();
				this.statusBarHeight = sys.statusBarHeight;
			}
			// #ifdef MP
			// 根据胶囊按钮距离， 设置导航高度
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.statusBarHeight = menuButtonInfo.top;
			// #endif
		},
		onLoad(option) {
			if (option && option.memberId) {
				this.memberId = option.memberId;
			}
			this.getInit();
			uni.setNavigationBarTitle({
				title: `点点列表`
			});
		},
		onShow() {
			const { bw_params, bw_user_temp } = getApp().getBWData(['bw_params', 'bw_user_temp']);
			if (bw_params && bw_params.access_token) {
				this.userInfo = bw_user_temp;
				this.ShowBolObj.isLogin = true;
				// } else {
				// 	this.$nextTick(() => {
				// 		this.$refs.notLogin.openLogin({
				// 			show: true,
				// 			position: 'center'
				// 		});
				// 	});
			}
		},
		onReachBottom() {
			if (this.navIndex == 0) {
				if (this.page.size * this.page.current < this.page.total) {
					this.page.loading = 'loading';
					this.page.size += 10;
					this.getDdList();
				} else {
					this.page.loading = 'nomore';
				}
			} else {
				if (this.albumPage.size * this.albumPage.current < this.albumPage.total) {
					this.albumPage.loading = 'loading';
					this.albumPage.current++;
					this.getDdList();
				} else {
					this.albumPage.loading = 'nomore';
				}
			}
		},
		onPullDownRefresh() {
			if (this.navIndex == 0) {
				this.page.size = 20;
				this.getDdList();
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 1000);
			}
		},
		methods: {
			login() {
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				});
			},
			getInit() {
				if (this.memberId) {
					this.getOtherUser(this.memberId);
				} else {
					this.getUserData();
				}
			},
			// tab切换
			navTap(obj) {
				this.navIndex = obj.index
				if (obj.index != 0) {
					this.getAlbumInit()
				}
			},
			// 显示操作功能
			actionShow(item, index) {
				this.albumList.filter((obj, i) => {
					obj.show = false
				})
				item.show = !item.show
				this.albumList.splice(index, 1, item)
			},
			// 操作处理
			actionTap(item, index, type) {
				item.show = false
				this.albumList.splice(index, 1, item)
				if (type == 'download') {
					// #ifdef H5
					let pdfData = item.albumUrl //创建预览路径	
					let downloadElement = document.createElement("a");
					downloadElement.href = pdfData
					downloadElement.download = item.albumUrl // 下载后文件名
					document.body.appendChild(downloadElement)
					downloadElement.click() // 点击下载
					document.body.removeChild(downloadElement) // 下载完成移除元素
					window.URL.revokeObjectURL(pdfData) // 释放掉blob对象
					// #endif
					// #ifdef MP
					uni.showLoading({
						title: '正在下载'
					});
					uni.downloadFile({
						url: item.albumUrl, //下载地址接口返回
						success: (data) => {
							if (data.statusCode === 200) {
								//隐藏加载框
								uni.hideLoading();
								//文件保存到本地
								uni.saveFile({
									tempFilePath: data.tempFilePath, //临时路径
									success: function(res) {
										// console.log('打印res',res)
										uni.showToast({
											icon: 'success',
											mask: true,
											// title: '文件已保存：' + res.savedFilePath, //保存路径
											title: '下载成功',
											duration: 2000,
										});
									}
								});
							}
						},
						fail: (err) => {
							console.log(err);
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '文件下载失败',
							});
						},
					});
					// #endif
				}
				if (type == 'share') {
					uni.downloadFile({
						url: item.albumUrl, // 下载url
						success(res) {
							// 下载完成后转发
							if (item.albumType == 1) {
								wx.shareFileMessage({
									filePath: res.tempFilePath,
									success() {},
									fail: console.error,
								})
							}
							if (item.albumType == 2) {
								wx.shareVideoMessage({
									videoPath: res.tempFilePath,
									success() {},
									fail: console.error,
								})
							}
						},
						fail: console.error,
					})
				}
			},
			// 相册视频请求初始化
			getAlbumInit() {
				this.albumPage = {
					current: 1,
					size: 20,
					total: 0,
					loading: 'loading'
				}
				this.albumList = []
				this.getAlbumList()
			},
			// 相册视频列表
			getAlbumList() {
				memberAlbumList({
					current: this.albumPage.current,
					size: this.albumPage.size,
					memberId: this.detail.memberId,
					albumType: this.navList[this.navIndex].key // 2
				}).then(res => {
					this.albumList = this.albumList.concat(res.data.list)
					this.albumPage.total = res.data.total;
					const {
						total,
						current,
						size
					} = res.data
					if (total < current * size) {
						this.albumPage.loading = 'nomore';
					}
				})
			},
			// 预览图片
			preview(index) {
				const list = []
				this.albumList.filter(item => {
					if (!item.isNeedPoint) {
						list.push(item.albumUrl)
					}
				})
				uni.previewImage({
					current: index,
					urls: list
				});
				const item = this.albumList[index]
				// 隐藏操作菜单
				item.show = false
				this.albumList.splice(index, 1, item)
			},
			// 查看视频
			previewVideo(item, index) {
				this.isVideo = true
				this.albumUrl = item.albumUrl
				// 隐藏操作菜单
				item.show = false
				this.albumList.splice(index, 1, item)
			},
			// 预览图片
			viewByPoint(item, index) {
				const bw_params = getApp().getBWData(['bw_params']).bw_params
				if (bw_params && bw_params.access_token) {
					uni.showModal({
						title: '温馨提示',
						content: '查看此照片，需要消耗3积分',
						success: (res) => {
							if (res.confirm) {
								albumViewByPoint({
									id: item.id
								}).then(obj => {
									if (obj.data) {
										this.albumList[index].isNeedPoint = false
										// this.getAlbumInit()
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					this.$refs.notLogin.openLogin({
						show: true,
						position: 'center'
					})
				}
			},

			// 递名片
			giveCard() {
				if (!this.ShowBolObj.isLogin) {
					this.$refs.notLogin.openLogin({
						show: true,
						position: 'center'
					});
					return;
				}
				if (this.detail.isFriend) {
					this.$pageTo('/about/guidePage');
				} else {
					// this.$pageTo('/cardChange?id='+this.detail.memberId)
					let obj = {
						groupIds: [],
						isLookMine: 1,
						nickname: '',
						receiverMemberId: this.detail.memberId,
						requestSources: '1'
					};
					cardRequest({
						...obj
					}).then(res => {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						});
					});
				}
			},
			// 关注
			attention(type) {
				if (!this.ShowBolObj.isLogin) {
					this.$refs.notLogin.openLogin({
						show: true,
						position: 'center'
					});
					return;
				}
				let message = !type ? '已关注' : '取消关注';
				if (!type) {
					// 未关注
					addAttention({
						othersId: this.detail.memberId
					}).then(res => {
						uni.showToast({
							icon: 'none',
							title: message
						});
						this.detail.isAttention = !type;
					});
				} else {
					let memberIdList = [this.detail.memberId];
					manageAttention({
						memberIdList: memberIdList
					}).then(res => {
						uni.showToast({
							icon: 'none',
							title: message
						});
						this.detail.isAttention = !type;
					});
				}
				this.getDdList();
			},
			// 查看别人点点首页
			getOtherUser(id) {
				getOtherUser({
					memberId: id
				}).then(res => {
					this.linkData = {
						id: res.data.memberId
					};
					this.detail = res.data;
					this.ShowBolObj.isShowCard = this.userInfo.memberId != this.detail.memberId;
					this.getDdList();
				});
			},
			getUserData() {
				getUserHome({})
					.then(res => {
						this.detail = res.data;
						this.linkData = {
							id: res.data.memberId
						};
						this.ShowBolObj.isShowCard = this.userInfo.memberId != this.detail.memberId;
						this.getDdList();
					})
					.catch(err => {
						if (err.code == 401006) {
							this.$nextTick(() => {
								this.$refs.notLogin.openLogin({
									show: true,
									position: 'center'
								});
							});
						}
					});
			},
			getDdList() {
				if (this.page.size == 20) {
					uni.showLoading({
						mask: true,
						title: '加载中...'
					});
				}
				const obj = {
					memberId: this.detail.memberId,
					...this.page,
					dynamicType: 1
				};
				getCircleDynamicAll({
						...obj
					})
					.then(res => {
						this.myddList = res.data.list;
						this.page.total = res.data.total;
						this.ShowBolObj.isShow = true;
						const {
							total,
							current,
							size
						} = res.data
						if (total < current * size) {
							this.page.loading = 'nomore';
						}
					})
					.finally(() => {
						uni.hideLoading();
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-wrap{min-height: calc(100vh);}
	.tabs-nav {
		padding: 0 20rpx;
		height: 88rpx;
		background-color: var(--viewBgColor);
		border-bottom: 1rpx solid var(--backgroundDivisionColor);
	}

	.tabs-nav .tabs-item {
		padding: 0 20rpx;
		height: 88rpx;
		position: relative;
		color: var(--contentFontLightColor);
	}

	.tabs-nav .tabs-item.active {
		font-weight: bold;
		color: var(--titleFontColor);
	}

	.tabs-nav .tabs-item.active::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -20rpx;
		width: 40rpx;
		height: 6rpx;
		border-radius: 6rpx;
		background-color: var(--titleFontColor);
		overflow: hidden;
	}

	.albumList {
		padding: 32rpx 0 40rpx 40rpx;
	}

	.albumList .album-item {
		margin: 0 22rpx 24rpx 0;
		position: relative;
		width: 324rpx;
		height: 444rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.albumList .album-item .pic {
		width: 324rpx;
		height: 444rpx;
		border-radius: 12rpx;
		position: relative;
		z-index: 1;
	}

	.albumList .album-item .layer {
		position: absolute;
		left: 0;
		top: 0;
		padding: 16rpx 0 0 16rpx;
		width: 100%;
		height: 100%;
		background-color: rgba(208, 211, 219, .2);
		z-index: 2;
	}

	.albumList .album-item .action {
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 4;
		width: 48rpx;
		height: 48rpx;
		overflow: hidden;
		border-radius: 0 0 12rpx 0;
		background-color: rgba(20, 23, 32, .5);
	}

	.albumList .album-item .pic-blur {
		filter: blur(20rpx);
	}

	.video-time {
		position: absolute;
		left: 16rpx;
		bottom: 16rpx;
		z-index: 4;
		color: var(--contentBgImageTitleColor);
	}

	.bwfont { color: var(--contentBgImageTitleColor);}
	.modal-action {
		position: absolute;
		right: 8rpx;
		bottom: 56rpx;
		padding: 4rpx 0;
		background-color: rgba(20, 23, 32, .5);
		z-index: 4;
		color: var(--contentBgImageTitleColor);
		width: 152rpx;
		background: rgba(31, 35, 45, 0.9);
		box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 12rpx
	}

	.modal-action .action-item {
		height: 80rpx;
	}



	.video-box {
		width: 100%;
		height: calc(100vh);
	}

	.video-box .video-inner {
		position: relative;
		z-index: 2;
		width: calc(100vw);
		height: calc(100vh);
	}

	.video-box .close {
		position: fixed;
		top: 150rpx;
		right: 24rpx;
		z-index: 10;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%
	}

	.mine_xx {

		// color: #f7f9ff;
		.backImg {
			width: 100%;
			padding: 30rpx 40rpx 24rpx 40rpx;
			position: relative;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: var(--contentBgImageTitleColor);
			.user-info{padding: 0 0 36rpx;}
			.space{height: 48rpx;width: 100%;}
			.otherCard {
				.btn-action{
					height: 68rpx;
					background: rgba(0, 0, 0, 0.2);
					border-radius: 8rpx;
					border: 1rpx solid var(--backgroundDivisionColor);
				}
				.bwfont{margin-right: 10rpx;}
				.btn-action+.btn-action{margin-left: 20rpx;}
			}
		}

		.ddDtail {
			padding: 0 20rpx;
		}
	}

	.ming_tx {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 30rpx;
		flex-shrink: 0;
	}
	.grxx{
		.info{margin-top: 16rpx;}
	}
</style>